<template>
  <PublicPage pageName="奖金明细" :borderType="true" :showNav="true">
    <scroll-view scroll-y class="bonusDetails" @scrolltolower="getMore">
      <view class="topCartBox">
        <view>
          <view class="tc ">获取奖金总额</view>
          <view class="themeFontColor fz-32 fw6 u-p-t-16 tc">{{getParams.totalBonus || 0}}</view>
        </view>
      </view>
      <u-sticky :offset-top="(globalData.navHeight * 2)" v-if="getParams.pageType!=1">
        <view class="linh-50 px32 fz-16" style="background-color:#F7F8FA;"><text class="u-p-r-16">第{{getParams.periods || 0}}期</text>{{contrastTimeFn(getParams.startTime)}} - {{contrastTimeFn(getParams.endTime)}}</view>
      </u-sticky>
      <view v-if="recordsList.length">
        <view v-for="(item,index) in recordsList" :key="index" class="forBox justify-between items-center" @click="navigateTo({url: `/pagesB/advertiseChild/bonusDetailsChild?bonusMoneyLogId=${item.bonusMoneyLogId}`})">
          <view>
            <view>{{item.title}}</view>
            <view class="u-p-t-16 viceColor">{{item.createTime}}</view>
          </view>
          <view class="themeFontColor fw5 fz-16">+{{item.changeBonus}}</view>
        </view>
      </view>

      <view v-if="!recordsList.length && isLoad" style="height: calc(100% - 500rpx);">
        <DefaultPage type="2" :custoBtn="true" :tips="getParams.pageType==1?'暂时还没有获得提成奖金':'本期暂无奖金记录'">
          <view class="u-flex" v-if="getParams.pageType==1">
            <button class="red_btn lack_invitation_btn" id="lackInvitation" open-type="share">
              立即邀请赚奖金
            </button>
          </view>
        </DefaultPage>
      </view>
    </scroll-view>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import Util from '@/api/util.js'
import mini from "@/api/mini.js";

export default {
  components: {
    PublicPage,
    DefaultPage
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    }
  },
  data(){
    return {
      getParams: {
        currentPage: 1,
        pageSize: 10,
        periods: 1,
        startTime: "",
        endTime: "",
        totalBonus: 0
      },
      isLoad: false,
      recordsList: []
    }
  },
  onLoad(options){
    this.getParams = Object.assign(this.getParams, options)
    this.getBonusLog()
  },
  onShareAppMessage(res) {
    let _shareObj = {}
    let userInfo = this.$store.state.userInfo
    if(res.from === 'button') {
      if (res.target.id == 'lackInvitation') {
        _shareObj = {
          title: '超好用的社群分销工具，视频带货出单快，全场功能免费用！',
          imageUrl: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/share_pullNew_img.png',
          path: `/pagesB/pullNew/landingPage?idCode=${userInfo.idCode}`
        }
      }
    }
    console.log(JSON.parse(JSON.stringify({_shareObj})), '分享参数打印')
    return _shareObj
  },
  methods:{


    getBonusLog(){
      if (this.getParams.pageType==1) { // 绑新过来需要传type：3
        this.getParams = {
          ...this.getParams,
          type: 3
        }
      }
      mini.getBonusLog(this.getParams).then(res=>{
        this.recordsList = [...this.recordsList,...res.data.records]
        this.isLoad = true
      })
    },
    // 加载更多
    getMore(){
      if(this.recordsList.length >= (this.getParams.currentPage * this.getParams.pageSize)){
        this.getParams.currentPage++
        this.getBonusLog()
      }
    },
    contrastTimeFn (data) {
      return Util.contrastTime(data,'/')
    },
  }
}
</script>

<style lang="scss" scoped>
.bonusDetails{
  height: 100%;
  .topCartBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 312rpx;
    background-color: #FFF;
    box-shadow: inset 0px -1px 0px #EBEDF0;
  }
  .forBox{
    padding: 24rpx 32rpx;
    background-color: #FFF;
  }
}
.lack_invitation_btn {
  width: 260rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24rpx auto 0;
}
</style>